<template>
  <div>
    <h1>当前和是:{{ $store.state.sum }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="deincrement">-</button>
    <button @click="incrementOdd">当前和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  
  methods: {
    // 在组件中修改共享数据 两种场景:
    increment() {
       //不需要做预处理的逻辑 直接commit提交mutations做最终输出即可
      this.$store.commit("JIA", this.n);
    },
    deincrement() {
      this.$store.commit("JIAN", this.n);
    },
      //需要预处理的逻辑(涉及异步) 先发送至actions进行预处理后在提交至mutations做最终输出
    incrementOdd() {
      this.$store.dispatch("jiaOdd", this.n);
    },
    incrementWait() {
      this.$store.dispatch("jiawait", this.n);
    },
  },
};
</script>
<style lang="css">
button {
  margin-left: 5px;
}
</style>